<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" import="com.unitedats.common.util.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/pure-min.css" />
<link rel="stylesheet" href="css/pure-skin-mine.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="js/validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
	$(function() {
		$("body").prop("class", "pure-skin-mine");
		$("form").prop("class", "pure-form");
		// style buttons with pure framework
		$("input[type='button']").addClass("pure-button");
		$("input[type='submit']").addClass("pure-button pure-button-primary");

		$("#loginForm").validate({
			rules : {
				userName : "required",
				password : "required"
			},
			messages : {
				userName : "User name is Required",
				password : "Password is Required"
			}
		});
	});
</script>
<style type="text/css">
label.error {
	display: block;
	margin-right: 5px !important;
	color: #F00 !important;
}
div#login_form {
	width: 25%;
	padding: 25px 25px 50px 50px;
	border: 1px solid #333;
	border-radius:10px;
	margin: 40px auto
}
</style>
<title>Login</title>
</head>
<body>
	<noscript>
		<div id="page_mask">
			You can not use the application with the javascript disabled <br />
			please enable javascript from browser configurations<br /> then
			click <a href='<%=request.getAttribute("javax.servlet.forward.request_uri")%>'>here</a>
			to continue
		</div>
	</noscript>
	<form name="loginForm" id="loginForm" method="post"	action="LoginProcess">
		<div id="login_form">
		<table align="center" class="layout_grid">
			<tr>
				<td colspan="2"><%=WebUtil.getSessionMessage(request)%></td>
			</tr>
			<tr>
				<td colspan="2"><h1 class="page_title">Login Form</h1></td>
			</tr>
			<tr>
				<td class="side_label_top">User name :</td>
				<td><input type="text" name="userName" id="userName"></td>
			</tr>
			<tr>
				<td class="side_label_top">Password :</td>
				<td><input type="password" name="password" id="password"></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td><input type="submit" name="button" id="button" value="Login"></td>
			</tr>
		</table>
		</div>
	</form>
</body>
</html>